<!DOCTYPE html>
<html>
	<head>
		<title>Recorder</title>
		<meta http-equiv='content-Type' content='text/html; charset=utf8' />
		<meta http-equiv="description" content='App main window' />

		<!-- css导入 -->
		<link rel='stylesheet' type='text/css' href='css/index.css'/>

		<!-- 导入bootstrap和jquery -->
		<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

		<script>
		    window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.min.js');
		    require('../node_modules/bootstrap/dist/js/bootstrap.min.js');
		</script>

		<link rel="stylesheet" href="CodeMirror/lib/codemirror.css" />



		<!--引入css文件，用以支持主题-->
		<link rel="stylesheet" href="CodeMirror/theme/3024-day.css">
		<link rel="stylesheet" href="CodeMirror/theme/3024-night.css">
		<link rel="stylesheet" href="CodeMirror/theme/base16-dark.css">
		<link rel="stylesheet" href="CodeMirror/theme/base16-light.css">
		<link rel="stylesheet" href="CodeMirror/theme/colorforth.css">
		<link rel="stylesheet" href="CodeMirror/theme/dracula.css">
		<link rel="stylesheet" href="CodeMirror/theme/eclipse.css">
		<link rel="stylesheet" href="CodeMirror/theme/elegant.css">
		<link rel="stylesheet" href="CodeMirror/theme/neat.css">

		<link rel='stylesheet' href='http://at.alicdn.com/t/font_664078_0ueydnotila0pb9.css' />

		<!-- js导入 -->

		<script type="text/javascript" src='js/index.js'></script>
		<script type="text/javascript" src='js/painter.js'></script>
		<script type="text/javascript" src='js/fontEffect.js'></script>
		<script type="text/javascript" src='js/file.js'></script>
		<script type="text/javascript" src='js/shadow.js'></script>

	    <script src="CodeMirror/lib/codemirror.js" type="text/javascript"></script>
	    <!--Java/C++/C/C#代码高亮-->
	    <script src="CodeMirror/mode/clike/clike.js"></script>
	    <!-- 代码高亮 -->
	    <script src="CodeMirror/mode/go/go.js"></script>
	    <script src="CodeMirror/mode/CSS/css.js"></script>
	    <script src="CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
	    <script src="CodeMirror/mode/javascript/javascript.js"></script>
	    <script src="CodeMirror/mode/mysql/mysql.js"></script>
	    <script src="CodeMirror/mode/php/php.js"></script>
	    <script src="CodeMirror/mode/plsql/plsql.js"></script>
	    <script src="CodeMirror/mode/python/python.js"></script>
	    <script src="CodeMirror/mode/sql/sql.js"></script>
	    <script src="CodeMirror/mode/vb/vb.js"></script>
	    <script src="CodeMirror/mode/xml/xml.js"></script>
	    <script src="CodeMirror/addon/mode/loadmode.js"></script>
	    <script src="CodeMirror/mode/meta.js"></script>
	    <script src="js/insertCode.js"></script>
	    <!--括号匹配-->
	    <script src="CodeMirror/addon/edit/matchbrackets.js"></script>

		<script type="text/javascript" src='js/insertCode.js'></script>
		<!-- 分享逻辑 -->
		<script type="text/javascript" src='js/share.js'></script>

		

	</head>
	<body>
		<div class='board'>
			<div class='left-board'>
				<!--左侧功能按键 -->
				<input class='left-btn search-box' type='text' placeholder="搜索" />
				<div class='left-btn hover-btn createNew'><span class='iconfont icon-1701wenjian downArrow'></span>新建</div>
				<div class='left-btn hover-btn openNew'><span class='iconfont icon-open' style='font-size: 20px !important;'></span>开启笔记</div>
				<div class='left-btn hover-btn save'><span class='iconfont icon-save' style='font-size: 20px !important;'></span>保存修改</div>
				<div class='left-btn hover-btn shadowBtn'><span class='iconfont icon-text-shadow' style='font-size: 20px !important;'></span>影子通道</div>

				<button  class='left-btn hover-btn insertCode'type="button" style="border:none;background:#000" onclick="insertCode()"><span class='iconfont icon-code' style='font-size: 24px !important;'></span><br>插入代码</button>
				<div class='left-btn hover-btn config'><span class='iconfont icon-peizhiconfiguration15' style='font-size: 20px !important;'></span>设置</div>
				<img class='edge' src='img/edge.png' />
				<img class='fold' src='img/triangle.png' />

				<div class='hover-btn quit'><span class='iconfont icon-exit quitIcon'></span>退出</div>

				<!-- 右侧功能按键 -->
				<!--画笔-->	

								
				<span id='pencil' class='tool_unclicked iconfont icon-pencil' tool-name='pencil'></span>
				<span id='eraser' class='tool_unclicked iconfont icon-ico-erasertool-May'></span>
				<!--形状工具-->
				<span id='line' class='tool_unclicked iconfont icon-line'></span>
				<span id='rect' class='tool_unclicked iconfont icon-shape-rectangle-plus'></span>
				<!--画布清空-->
				<span id='brush' class='iconfont icon-clearup'></span>
				<!--字体格式快速修正-->

				<span id='italicSetting' class='tool_unclicked iconfont icon-formatitalic' value='italic'></span>
				<span id='boldSetting' class='tool_unclicked iconfont icon-format-bold' value="bold"></span>
				<span id='underlineSetting' class='tool_unclicked iconfont icon-formatunderline' value="underline"></span>


				<!--字体颜色设置-->

				<input type='color' id='fontcolorSetting'/>
				<!--字体大小设置-->
				<span id='fontsizeSettingLabel'>字体大小</span>
				<select id='fontsizeSetting'>
						<option>8</option>
						<option>10</option>
						<option>12</option>
						<option>16</option>
						<option selected>18</option>
						<option>25</option>
						<option>36</option>
				</select>

				<input type='text' id='fontsizeSettingInput' value='18'/>
				<!--字体类型设置 (待完善)-->
				<span id='fontstyleSettingLabel'>字体类型</span>

				<select id='fontstyleSetting'>
					<option>楷体</option>
					<option>宋体</option>
					<option>黑体</option>
					<option selected>微软雅黑</option>
				</select>

				<input type='text' id='fontstyleSettingInput' value='微软雅黑'/>


			</div>
			<div class='right-board'>
				<div class='top'>
					<canvas id='topInfo' width="1126px" height="64px"></canvas>
					<img src='img/user.jpg' class='userIcon' />
					<span class='userName iconfont icon-icon-user'>USERNAME</span>
					<div class='userArrow'></div>

					<!--<div class='updateState'><div class='updateOuter'></div><div class='updateInner'></div></div>-->

					<!--分享按钮-->

					<span class='shareBtn iconfont icon-shareicon' style='font-size: 26px !important;' onclick="share()"></span>

				</div>
			

				<div class='middle'>

					<input type='text' id='titleInput' />
					<div id='paintArea'>
						<canvas id='painter' width='1017' height='430'></canvas>
						<div id="contentInput" class='contentInput' contenteditable="true" type='text'></div>
						<!--=<textarea id='contentInput'></textarea>-->
					</div>

					<!-- <textarea class='contentInput'></textarea> -->

				</div>
			</fieldset>
				<div class='bottom'>
					<div class='stateInfo'>
						<p>已更新副本内容到服务器 18/4/14 20:57</p>
						<p>当前工作内容已保存至副本 18/4/15 20:55</p>
					</div>
					<span id='copyBtn' class='iconfont icon-backuprestore'></span>
					<div class='copyInfo copyInfo-hidden' id='copyList''>
						<span class='copyTitle'>历史记录</span>
						<div class='item item_current' id='item_0'>
							<div class='item_mask'></div>
							<img class='item_btn' src='img/undo.png' />
							<span class='item_info'>新建</span>
							<img class='item_cancel' src='img/del.png' />
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<!-- 拖拽图片并支持缩放 -->
		<script type="text/javascript"src="js/insertPic.js"></script>
</html>